<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>云盘项目</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/normalize.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/login.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/sign-up-login.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/statics/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/inputEffect.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/tooltips.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/statics/css/spop.min.css" />
<script src="${pageContext.request.contextPath}/statics/js/snow.js"></script>
<script
	src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>

<script
	src="${pageContext.request.contextPath}/statics/js/jquery.pure.tooltips.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/spop.min.js"></script>
<script>
	(function() {
		// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
		if (!String.prototype.trim) {
			(function() {
				// Make sure we trim BOM and NBSP
				var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
				String.prototype.trim = function() {
					return this.replace(rtrim, '');
				};
			})();
		}

		[].slice.call(document.querySelectorAll('input.input__field')).forEach(
				function(inputEl) {
					// in case the input is already filled..
					if (inputEl.value.trim() !== '') {
						classie.add(inputEl.parentNode, 'input--filled');
					}

					// events:
					inputEl.addEventListener('focus', onInputFocus);
					inputEl.addEventListener('blur', onInputBlur);
				});

		function onInputFocus(ev) {
			classie.add(ev.target.parentNode, 'input--filled');
		}

		function onInputBlur(ev) {
			if (ev.target.value.trim() === '') {
				classie.remove(ev.target.parentNode, 'input--filled');
			}
		}
	})();

	$(function() {
		$('#login #login-password').focus(function() {
			$('.login-owl').addClass('password');
		}).blur(function() {
			$('.login-owl').removeClass('password');
		});
		$('#login #register-password').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #register-repassword').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #forget-password').focus(function() {
			$('.forget-owl').addClass('password');
		}).blur(function() {
			$('.forget-owl').removeClass('password');
		});
	});

	function goto_register() {
		$("#register-username").val("");
		$("#register-password").val("");
		$("#register-repassword").val("");
		$("#register-code").val("");
		$("#tab-2").prop("checked", true);
	}

	function goto_login() {
		$("#login-username").val("");
		$("#login-password").val("");
		$("#tab-1").prop("checked", true);
	}

	function goto_forget() {
		$("#forget-username").val("");
		$("#forget-password").val("");
		$("#forget-code").val("");
		$("#tab-3").prop("checked", true);
	}

	function login() {//登录
		var phone = $("#login-phone").val(), password = $("#login-password")
				.val(), validatecode = null, flag = false;
		//判断手机号密码是否为空
		if (phone == "") {
			$.pt({
				target : $("#login-phone"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "手机号不能为空"
			});
			flag = true;
		}
		if (password == "") {
			$.pt({
				target : $("#login-password"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "密码不能为空"
			});
			flag = true;
		}
		//输入正确手机号
		var regExp = new RegExp("^[1]{1}[3,4,5,8]{1}[0-9]{9}$");
		if (!regExp.test(phone)) {
			$.pt({
				target : $("#login-phone"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "请输入正确手机号"
			});
			flag = true;
		}

		if (flag) {
			return false;
		} else {//登录
			//调用后台登录验证的方法
			var jsonStr = JSON.stringify({
				userPwd : password,
				phone : phone
			});
			console.log(jsonStr);
			$.ajax({
				url : "${pageContext.request.contextPath}/tologin",
				type : "post",
				/* dataType : 'json', */
				data : jsonStr,
				contentType : 'application/json;charset=utf-8',
				async : false, //或false,是否异步
				success : function(msg) {
					if(msg=="ok")
					  window.location.href = "${pageContext.request.contextPath}/admin.jsp";
				},
			 error:function(xhr){
				alert(xhr.status)
			} 
			});
			/* alert('登录成功'); */
			return true;
		}
	}

	//注册
	function register(){
		/* alter(username+","+password+","+code); */
		var username = $("#register-username").val(),
			password = $("#register-password").val(),
			repassword = $("#register-repassword").val(),
			code = $("#register-code").val(),
			flag = false,
			validatecode = null;
		//判断用户名密码
		var regExp = new RegExp("^[a-zA-Z0-9_]{2,10}$");
		if(!regExp.test(username)){
			$.pt({
        		target: $("#register-username"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"用户名必须为2-10位的字母或数字"
        	});
			flag = true;
		}
		
		regExp = new RegExp("^[a-zA-Z0-9_]{6,15}$");
		if(!regExp.test(password)){
			$.pt({
        		target: $("#register-password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码只能是6-15位以下的字母或数字"
        	});
			flag = true;
		}
		
		regExp = new RegExp("^[1]{1}[3,4,5,8]{1}[0-9]{9}$");
		var isPhoneExist = false;
		if(!regExp.test(code)){
			$.pt({
		        target: $("#register-code"),
		        position: 'r',
		        align: 't',
		        width: 'auto',
		        height: 'auto',
		        content:"手机号格式不正确" 
		       });
			flag = true;
		}else{
			//调后台代码检查手机号是否已经被注册
			//console.log(username+" "+password+" "+code+" regExp.test(code):"+regExp.test(code));
			var jsonStr = JSON.stringify({phone:code});
			 $.ajax({
				 url:"${pageContext.request.contextPath}/isPhoneExist",
			      type: "post",
			      data: jsonStr,
			      //dataType: "json",
			      contentType:'application/json;charset=utf-8',
			      async:false,
			      success: function(msg){
			         console.log(msg);
			         if(msg!="no"){//手机号存在
			        	 flag = true;
			        	 isPhoneExist = true;
			         }
			      },
			      error:function(xhr){
			    	  alert(xhr.status);
			    	  flag = true;
			      }
			}); 
		}
		
		if(isPhoneExist){
			$.pt({
		        target: $("#register-code"),
		        position: 'r',
		        align: 't',
		        width: 'auto',
		        height: 'auto',
		        content:"手机号手机号已存在" 
		       });
			flag = true;
		}
		
		console.log(flag+","+isPhoneExist);
		if(flag){
			return false;
		}else{//注册
			jsonStr = JSON.stringify({userName:username,userPwd:password,phone:code});
			$.ajax({
				 url:"${pageContext.request.contextPath}/toRegist",
			      type: "post",
			      data: jsonStr,
			      //dataType: "json",
			      contentType:'application/json;charset=utf-8',
			      async:false,
			      success: function(msg){
			         console.log(msg);
			         if(msg=="ok"){
			        	 console.log("注册成功");
			         }
			      },
			      error:function(xhr){
			    	  alert(xhr.status);
			    	  return false;
			      }
			}); 
		
			spop({			
				template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
				position: 'top-center',
				style: 'success',
				autoclose: 3000,
				onOpen : function(){
					var second = 2;
					var showPop = setInterval(function(){
						if(second == 0){
							clearInterval(showPop);
						}
						$('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录');
						second--;
					},1000);
				},
				onClose : function(){
					goto_login();
				}
			});
			return false;
		}
	}

	//重置密码
	function forget() {
		var username = $("#forget-username").val(), password = $(
				"#forget-password").val(), code = $("#forget-code").val(), flag = false, validatecode = null;
		//判断用户名密码是否为空
		if (username == "") {
			$.pt({
				target : $("#forget-username"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "用户名不能为空"
			});
			flag = true;
		}
		if (password == "") {
			$.pt({
				target : $("#forget-password"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "密码不能为空"
			});
			flag = true;
		}
		//用户名只能是15位以下的字母或数字
		var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
		if (!regExp.test(username)) {
			$.pt({
				target : $("#forget-username"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "用户名必须为15位以下的字母或数字"
			});
			flag = true;
		}
		//检查用户名是否存在
		//调后台方法

		//检查注册码是否正确
		if (code != '11111111') {
			$.pt({
				target : $("#forget-code"),
				position : 'r',
				align : 't',
				width : 'auto',
				height : 'auto',
				content : "注册码不正确"
			});
			flag = true;
		}

		if (flag) {
			return false;
		} else {//重置密码
			spop({
				template : '<h4 class="spop-title">重置密码成功</h4>即将于3秒后返回登录',
				position : 'top-center',
				style : 'success',
				autoclose : 3000,
				onOpen : function() {
					var second = 2;
					var showPop = setInterval(function() {
						if (second == 0) {
							clearInterval(showPop);
						}
						$('.spop-body').html(
								'<h4 class="spop-title">重置密码成功</h4>即将于'
										+ second + '秒后返回登录');
						second--;
					}, 1000);
				},
				onClose : function() {
					goto_login();
				}
			});
			return false;
		}
	}
</script>
<style type="text/css">
html {
	width: 100%;
	height: 100%;
}

body {
	background-repeat: no-repeat;
	background-position: center center #2D0F0F;
	background-color: #00BDDC;
	background-image:
		url(${pageContext.request.contextPath}/statics/images/snow.jpg);
	background-size: 100% 100%;
}

.snow-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100001;
}
</style>
</head>
<body>
	<!-- 雪花背景 -->
	<div class="snow-container"></div>
	<!-- 登录控件 -->
	<div id="login">
		<input id="tab-1" type="radio" name="tab" class="sign-in hidden"
			checked /> <input id="tab-2" type="radio" name="tab"
			class="sign-up hidden" /> <input id="tab-3" type="radio" name="tab"
			class="sign-out hidden" />
		<div class="wrapper">
			<!-- 登录页面 -->
			<div class="login sign-in-htm">
				<form class="container offset1 loginform" method="post">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="login-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content"> <span
							class="input input--hideo"> <input
							class="input__field input__field--hideo" type="text"
							id="login-phone" autocomplete="off" placeholder="请输入手机号"
							tabindex="1" maxlength="11" /> <label
							class="input__label input__label--hideo" for="login-username">
								<i class="fa fa-fw fa-user icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> <span class="input input--hideo"> <input
							class="input__field input__field--hideo" type="password"
							id="login-password" placeholder="请输入密码" tabindex="2"
							maxlength="15" /> <label class="input__label input__label--hideo"
							for="login-password"> <i
								class="fa fa-fw fa-lock icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> </section>
					</div>
					<div class="form-actions">
						<a tabindex="4" class="btn pull-left btn-link text-muted"
							onClick="goto_forget()">忘记密码?</a> <a tabindex="5"
							class="btn btn-link text-muted" onClick="goto_register()">注册</a>
						<input class="btn btn-primary" type="button" tabindex="3"
							onClick="login()" value="登录" style="color: white;" /> 
					</div>
				</form>
			</div>
			<!-- 忘记密码页面 -->
			<div class="login sign-out-htm">
				<form action="#" method="post" class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="forget-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content"> <span
							class="input input--hideo"> <input
							class="input__field input__field--hideo" type="text"
							id="forget-username" autocomplete="off" placeholder="请输入" /> <label
							class="input__label input__label--hideo" for="forget-username">
								<i class="fa fa-fw fa-user icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> <span class="input input--hideo"> <input
							class="input__field input__field--hideo" type="text"
							id="forget-code" autocomplete="off" placeholder="请输入注册码" /> <label
							class="input__label input__label--hideo" for="forget-code">
								<i class="fa fa-fw fa-wifi icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> <span class="input input--hideo"> <input
							class="input__field input__field--hideo" type="password"
							id="forget-password" placeholder="请重置密码" /> <label
							class="input__label input__label--hideo" for="forget-password">
								<i class="fa fa-fw fa-lock icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> </section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted"
							onClick="goto_login()">返回登录</a> <input class="btn btn-primary"
							type="button" onClick="forget()" value="重置密码"
							style="color: white;" />
					</div>
				</form>
			</div>
			<!-- 注册页面 -->
			<div class="login sign-up-htm">
				<form action="addUser" method="post"
					class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="register-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content"> <span
							class="input input--hideo"> <input
							class="input__field input__field--hideo" type="text"
							id="register-code" autocomplete="off" name="phone"
							placeholder="请输入手机号码" /> <label
							class="input__label input__label--hideo" for="register-code">
								<i class="fa fa-fw fa-wifi icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> <span class="input input--hideo"> <input
							class="input__field input__field--hideo" type="text"
							id="register-username" autocomplete="off" name="userName"
							placeholder="请输入用户名" maxlength="15" /> <label
							class="input__label input__label--hideo" for="register-username">
								<i class="fa fa-fw fa-user icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> <span class="input input--hideo"> <input
							class="input__field input__field--hideo" type="password"
							id="register-password" name="userPwd" placeholder="请输入密码"
							maxlength="15" /> <label class="input__label input__label--hideo"
							for="register-password"> <i
								class="fa fa-fw fa-lock icon icon--hideo"></i> <span
								class="input__label-content input__label-content--hideo"></span>
						</label>
						</span> </section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted"
							onClick="goto_login()">返回登录</a> <input class="btn btn-primary"
							type="button" onClick="register()" value="注册"
							style="color: white;" />
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>